<template>
  <div style="background-color: #efefef; height: 100%; overflow: auto">
    <van-swipe :autoplay="3000" lazy-render>
      <van-swipe-item v-for="news in newses" :key="news">
        <van-image
          width="100%"
          height="240"
          fit="fill"
          :src="fileURL + news.FL_SrcPath"
        />
      </van-swipe-item>
    </van-swipe>
    <div
      style="
        display: flex;
        align-items: center;
        justify-content: space-around;
        background-color: white;
        margin: 10px;
        padding: 10px;
        border-radius: 10px;
      "
    >
      <iconButton icon="clock-o" title="待审核" num="10" />
      <iconButton icon="passed" title="已审核" />
      <iconButton icon="label-o" title="我发起" />
      <iconButton icon="share-o" title="分享我的" />
      <iconButton icon="bookmark-o" title="抄送我的" />
    </div>
    <div style="margin-bottom: 50px">
      <div
        style="
          background-color: white;
          margin: 0 10px 10px 10px;
          border-radius: 10px;
        "
        v-for="(group, index) in groups"
        :key="index"
      >
        <div style="font-size: 16px; padding: 10px; font-weight: bolder">
          {{ group.name }}
        </div>
        <div
          style="
            display: flex;
            align-items: center;
            margin-left: 10px;
            border-radius: 10px;
            flex-wrap: wrap;
          "
        >
          <textButton
            v-for="flow in group.flows"
            :key="flow.FLOW_ID"
            :title="flow.FLOW_Name"
            :color="colors[index % 4]"
          />
        </div>
        <!-- <van-sticky :offset-bottom="50" position="bottom"> -->
        <van-tabbar style="height: 50px">
          <van-tabbar-item icon="home-o">主页</van-tabbar-item>
          <van-tabbar-item icon="search">我的</van-tabbar-item>
        </van-tabbar>
        <!-- </van-sticky> -->
      </div>
    </div>
  </div>
</template>
<script>
import { getFlowGroups } from '@/api/common/home'
import { getUsingNewses } from '@/api/common/news'
import { baseURL, fileRoot } from '@/config'
import iconButton from '@/views/phone/components/iconButton.vue'
import textButton from '@/views/phone/components/textButton.vue'
export default {
  components: { iconButton, textButton },
  data: function () {
    return {
      groups: [],
      colors: ['#FF6C40', '#35C9B7', '#4089FF', '#00BF56'],
      newses: [],
      fileURL: baseURL + fileRoot,
    }
  },
  methods: {
    getFlowGroups() {
      getFlowGroups().then(({ data }) => {
        this.groups = data
      })
    },
    getUsingNewses() {
      getUsingNewses().then(({ data }) => {
        this.newses = data.Items
      })
    },
    toStartForm(flowId) {
      this.$router.push({
        name: 'formInfoPage',
        query: { flowId },
      })
    },
  },
  created: function () {
    this.getFlowGroups()
    this.getUsingNewses()
  },
}
</script>
<style scoped></style>
